import React, { useState, useEffect } from "react";
import { Table, Button, Modal, notification } from "antd";
import {
  DeleteOutlined,
  UploadOutlined,
  ExclamationCircleOutlined,
  EditOutlined,
} from "@ant-design/icons";
import axios from "axios";
const { confirm } = Modal;

export default function NewsDraft(props) {
  //数据
  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      render: (id) => {
        return <strong>{id}</strong>;
      },
    },
    {
      title: "新闻标题",
      dataIndex: "title",
      render: (title, item) => {
        return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>;
      },
    },
    {
      title: "作者",
      dataIndex: "author",
    },
    {
      title: "分类",
      dataIndex: "category",
      render: (category) => {
        return category.title;
      },
    },
    {
      title: "操作",
      render: (item) => {
        return (
          <div>
            {/* 删除按钮 */}
            <Button
              danger
              shape="circle"
              icon={<DeleteOutlined />}
              style={{ marginRight: "5px" }}
              onClick={() => {
                confirmMethod(item);
              }}
            />
            {/* 编辑按钮 */}
            <Button
              shape="circle"
              icon={<EditOutlined />}
              style={{ marginRight: "5px" }}
              onClick={() => {
                props.history.push(`/news-manage/update/${item.id}`);
              }}
            />

            {/* 发布按钮 */}
            <Button
              type="primary"
              shape="circle"
              icon={<UploadOutlined />}
              onClick={() => {
                handleCheck(item.id);
              }}
            />
          </div>
        );
      },
    },
  ];
  const [dataSource, setdataSource] = useState([]);
  const { username } = JSON.parse(localStorage.getItem("token"));
  //方法
  //是否删除的对话框
  const confirmMethod = (item) => {
    confirm({
      title: "你确定要删除吗?",
      icon: <ExclamationCircleOutlined />,
      onOk() {
        deleteMethod(item);
      },
      onCancel() {
        console.log("取消");
      },
    });
  };
  //点击确认删除后的方法
  const deleteMethod = (item) => {
    //当前页面同步+后端同步
    setdataSource(dataSource.filter((data) => data.id !== item.id));
    axios.delete(`/news/${item.id}`);
  };
  const handleCheck = (id) => {
    axios
      .patch(`/news/${id}`, {
        auditState: 1,
      })
      .then((res) => {
        props.history.push("/audit-manage/list");

        notification.info({
          message: `通知`,
          description: `您可以到审核列表中查看你的新闻`,
          placement: "bottomRight",
        });
      });
  };
  //useEffect
  useEffect(() => {
    axios
      .get(`/news?author=${username}&auditState=0&_expand=category`)
      .then((res) => {
        const list = res.data;
        setdataSource(list);
      });
  }, [username]);

  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{ pageSize: 5 }}
        rowKey={(item) => item.id}
      />
    </div>
  );
}
